<template>
	<z-paging auto-show-back-to-top :auto="i == index" ref="paging" v-model="dataList" :data-key="i" @query="queryList"
		:fixed="false" height="100%">
		<block v-for="(newsItem, newsIndex) in dataList" :key="newsIndex">
			<qgitem :item="newsItem" :newsId="newsItem.id"></qgitem>
		</block>
	</z-paging>
</template>

<script lang="ts" setup>
	import { ref, watch, nextTick, shallowRef } from 'vue'
	import { getArticleList, getQgLists } from '@/api/news'
	import qgitem from './qgitem.vue'
	const props = withDefaults(
		defineProps<{
			cid : number
			i : number
			index : number,
			keywords:string,
		}>(),
		{
			cid: 0
		}
	)

	const paging = shallowRef<any>(null)
	const dataList = ref([])
	const isFirst = ref<boolean>(true)

	watch(
		() => props.keywords, // 监听的响应式引用或计算属性  
		async (newKeywords, oldKeywords) => {
			
			paging.value?.reload()
		},
	);

	watch(
		() => props.index,

		async () => {
			await nextTick()
			if (props.i == props.index && isFirst.value) {
				isFirst.value = false
				paging.value?.reload()
			}
		},
		{ immediate: true }
	)

	// const 
	const keywords = ref("");

	const reloadenv = (keywords : any) => {
		paging.value?.reload();
	}

	const queryList = async (page_no, page_size) => {
		try {
			const { lists } = await getQgLists({
				cat_id: props.cid,
				keywords: props.keywords,
				page_no,
				page_size
			})
			paging.value.complete(lists)
		} catch (e) {
			console.log('报错=>', e)
			//TODO handle the exception
			paging.value.complete(false)
		}
	}
</script>

<style scoped></style>